<template>
  <div class="app-container">
    <el-row :gutter="20" type="flex" justify="space-around" align="center">
      <el-col class="my-col col-width">
        <!-- <div class="member-count">2203</div> -->
        <div>
          <line-chart
            chartTitle="累计会员数"
            chartType="line"
            :chartData="lineChartData"
          ></line-chart>
        </div>
      </el-col>
      <el-col class="my-col col-width">
        <line-chart
          chartTitle="会员活跃数"
          :chartData="barChartData"
        ></line-chart>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="my-row">
      <el-col :span="15">
        <el-row>
          <!-- <el-col :span="24" class="my-col panel-group">
            <panel-group></panel-group>
          </el-col> -->
          <el-col
            :span="24"
            class="my-col"
            style="padding: 20px; padding-bottom: 0"
          >
            <el-row type="flex" align="center" justify="space-between">
              <el-col :span="4" :offset="0" class="customer-transaction-title"
                >成交客户</el-col
              >
              <el-col :span="3" :offset="0">
                <div class="customer-transaction">
                  <div class="transaction-new">
                    <i>●</i>
                    <span>新客户</span>
                  </div>
                  <div class="transaction-old">
                    <i>●</i>
                    <span>老客户</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4" :offset="0" class="transaction-amount">
                <div class="amount-count">
                  {{ clientCount.newUserPayMoney }}
                </div>
                <div class="amount-label">新客户成交金额（元）</div>
                <div class="amount-count">
                  {{ clientCount.formerUserPayMoney }}
                </div>
                <div class="amount-label">老客户成交金额（元）</div>
              </el-col>
              <el-col :span="8">
                <pie-chart :chartData="clientMoneyChartData"></pie-chart>
              </el-col>
              <el-col :span="8">
                <pie-chart :chartData="clientPeopleChartData"></pie-chart>
              </el-col>
              <el-col :span="4" class="transaction-people">
                <div class="amount-count">{{ clientCount.newUserNumber }}</div>
                <div class="amount-label">新客户成交人数（人）</div>
                <div class="amount-count">
                  {{ clientCount.formerUserNumber }}
                </div>
                <div class="amount-label">老客户成交人数（人）</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8" :offset="1" class="my-col member-distributive">
        <pie-chart
          height="350px"
          legend
          titleShow
          :radius="['30%', '40%']"
          :chartData="levelChartData"
        ></pie-chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get } from "sortablejs";
import LineChart from "./components/LineChart.vue";
import PanelGroup from "./components/PanelGroup.vue";
import PieChart from "./components/PieChart.vue";
import {
  statisticsMemberNumber,
  statisticsMemberActiveNumber,
  statisticsMemberLevelDistribution,
  statisticsUserMakeNumber,
} from "@/api/data/member";
export default {
  name: "Analyse",
  components: { LineChart, PanelGroup, PieChart },
  data() {
    return {
      lineChartData: {
        time: [],
        data: [],
      },
      barChartData: {
        time: [],
        data: [],
      },
      levelDistribution: {},
      clientCount: {},
      levelChartData: [],
      clientPeopleChartData: [],
      clientMoneyChartData: [],
    };
  },
  created() {},
  mounted() {
    this.getLineChart();
    this.getBarChart();
    this.getLevelPieChart();
    this.getClientPieChart();
  },
  methods: {
    /**统计最近五天每天的新增会员数及会员总数 */
    getLineChart() {
      statisticsMemberNumber().then((res) => {
        this.lineChartData.time = res.data.timeMemberNumber.map(
          (item) => item.time
        );
        this.lineChartData.data = res.data.timeMemberNumber.map(
          (item) => item.number
        );
      });
    },
    /**统计最近五天每天的会员活跃数量 */
    getBarChart() {
      statisticsMemberActiveNumber().then((res) => {
        this.barChartData.time = res.data.map((item) => item.time);
        this.barChartData.data = res.data.map((item) => item.number);
      });
    },
    /**统计会员等级分布 */
    getLevelPieChart() {
      statisticsMemberLevelDistribution().then((res) => {
        this.levelChartData = [
          { name: "普通用户", value: res.data.commonUserCount || 0 },
          { name: "一级用户", value: res.data.oneCount || 0 },
          { name: "二级用户", value: res.data.twoCount || 0 },
          { name: "三级用户", value: res.data.threeCount || 0 },
          { name: "四级用户", value: res.data.fourCount || 0 },
          { name: "五级用户", value: res.data.fiveCount || 0 },
          { name: "六级用户", value: res.data.sixCount || 0 },
        ];
      });
    },
    /**统计新老客户成交金额级新老客户成交数量 */
    getClientPieChart() {
      statisticsUserMakeNumber().then((res) => {
        this.clientCount = res.data;
        this.clientMoneyChartData = [
          { value: res.data.newUserPayMoney, name: "新用户成交金额" },
          { value: res.data.formerUserPayMoney, name: "老用户成交金额" },
        ];
        this.clientPeopleChartData = [
          { value: res.data.newUserNumber, name: "新用户成交人数" },
          { value: res.data.formerUserNumber, name: "老用户成交人数" },
        ];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.col-width {
  /* 禁止 flex 自动调整宽度 */
  width: calc(49.666% - 20px);
  /* 41.666% 相当于 10/24，20px 是减去的 gutter */
}

.my-col {
  flex: none;
  background: linear-gradient(137deg, #e5e5e6 0%, #ffffff 10%, #ffffff 100%);
  border: 1px solid #e5e5e6;
  border-radius: 10px;
}

.member-count {
  position: absolute;
  right: 52%;
  top: 28px;
  font-size: 23px;
  color: #36a3f7;
}

.my-row {
  padding: 0 40px;
  margin-top: 20px;
}

.panel-group {
  margin-bottom: 20px;
  padding: 0 20px;
}

.customer-transaction-title {
  font-size: 25px;
  font-weight: 700;
}

.customer-transaction {
  display: flex;

  .transaction-new {
    margin-right: 10px;

    i {
      color: #ed7453;
      margin-right: 5px;
    }

    span {
      font-size: 12px;
    }
  }

  .transaction-old {
    i {
      color: #0034e4;
      margin-right: 5px;
    }

    span {
      font-size: 12px;
    }
  }
}

.transaction-amount {
  .amount-count {
    text-align: right;
    margin-right: 30px;
  }

  .amount-label {
  }
}

.transaction-people {
  .amount-label:nth-child(1) {
    margin-bottom: 30px;
  }
}

.amount-count {
  font-size: 23px;
  font-weight: 700;
  margin-top: 20px;
}

.amount-label {
  font-size: 13px;
}

.member-distributive {
  padding-top: 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
</style>
